<template>
  <div class="img-detail">
        <van-nav-bar
      title="图片详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="fixed-top"
    />
    <div>
      <h3 class="img-title">{{imgDescribe.title}}</h3>
      <p class="img-info">
        <span class="time">{{imgDescribe.add_time | dateFormat}}</span>
        <span>{{imgDescribe.click}}次浏览</span>
        <span>分类</span>

      </p>
    </div>
    <ul>
      <li>
        <vue-preview :slides="imgList"></vue-preview>
        <span style="color: gray; font-size: 13px;" v-html="imgDescribe.content"></span>
      </li>
    </ul>
    <div class="content"></div>
    <comment :id="id"></comment>
  </div>
</template>
<script>
import { getImgParticulars, getImgDescribe } from '@/api'
import Comment from '@/components/comment'
export default {
  components: {
    Comment
  },
  data () {
    return {
      id: +this.$route.params.id,
      imgList: [],
      imgDescribe: {}
    }
  },
  created () {
    this.initImg()
  },
  methods: {
    initImg () {
      getImgParticulars(this.id)
        .then(res => {
          console.log(res)
          // this.imgList = res.data.message
          let slide = res.data.message.map(item => {
            item.msrc = item.src
            item.w = 600
            item.h = 400
            return item
          })
          this.imgList = slide
        })
      getImgDescribe(this.id)
        .then(res => {
          console.log(res)
          this.imgDescribe = res.data.message[0]
          console.log(this.imgDescribe)
        })
    }
  }
}
</script>

<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }
  li > div > div{
    display: flex;
    flex-wrap: wrap;
    &>figure{
      width: 33.33%;
      margin: 0;
    }
  }
</style>

<style lang="scss" scoped>
.img-detail {
  .img-title {
    font-size: 16px;
    font-weight: bold;
  }
  .img-info {
    display: flex;
    justify-content: space-around;
    color: #26a2ff;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
  }
}
</style>
